import { TriangleDown } from '../Icon/TriangleDown';
import { Body } from '../Icon/Body';
import { Folder } from '../Icon/Folder';
import { Thumbnail } from '../Icon/Thumbnail';
import { SpriteSheet } from '../Icon/SpriteSheet';
import { Import } from '../Icon/Import';
import { useStore } from '../../store';
import { Item } from '../../stores/resourceStore';
import { observer } from 'mobx-react-lite';
import { ImageItem } from './ImageItem';

const Library = observer((props: any) => {
    const { resourceStore, imagePreviewStore } = useStore();

    const clickHandler = (e: any, index: number) => {
        resourceStore.setCurSelected(index);
    }

    const itemMouseEnterHandler = (e: any, index: number) => {
        imagePreviewStore.setUrl(resourceStore.resources[index].url);
        imagePreviewStore.setTop(e.target.getBoundingClientRect().top - document.getElementById("canvasWrap")!.getBoundingClientRect().top);
    };

    const itemMouseLeaveHandler = (e: any) => {
        imagePreviewStore.setUrl(null);
    }
    return (
        <div className='text-sm space-y-2 flex flex-col h-full'>
            < div className="relative" >
                <input
                    type="text"
                    placeholder="Search Library"
                    className="w-full rounded-sm border-gray-200 shadow-sm p-0 text-black"
                />

                <span
                    className="pointer-events-none absolute inset-y-0 end-0 grid w-10 place-content-center text-gray-500"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
                        <path
                            fillRule="evenodd"
                            d="M5.404 14.596A6.5 6.5 0 1116.5 10a1.25 1.25 0 01-2.5 0 4 4 0 10-.571 2.06A2.75 2.75 0 0018 10a8 8 0 10-2.343 5.657.75.75 0 00-1.06-1.06 6.5 6.5 0 01-9.193 0zM10 7.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
                            clipRule="evenodd"
                        />
                    </svg>
                </span>
            </div>

            <div className='w-full grow overflow-auto'>
                <div className='flex items-center'>
                    <TriangleDown></TriangleDown>
                    <Body></Body>
                    <span className='ml-2'>Armature</span>
                </div>

                <div className='flex items-center ml-4'>
                    <TriangleDown></TriangleDown>
                    <Folder></Folder>
                    <span className='ml-2'>Library/</span>
                    <span className='grow h-5'></span>
                    <Import></Import>
                </div>
                {
                    resourceStore.resources.map((item: Item, index: number) => {
                        console.log("resource map", item);
                        let className = 'flex items-center pl-4 hover:bg-slate-700 cursor-pointer';
                        if (index == resourceStore.curSelected) {
                            className += ' bg-[#2f4e52]';
                        }

                        if (item.type == "image") {
                            return (
                                <ImageItem
                                    className={className}
                                    key={item.name}
                                    index={index}
                                    name={item.name}
                                    clickHandler={clickHandler}
                                    itemMouseEnterHandler={itemMouseEnterHandler}
                                    itemMouseLeaveHandler={itemMouseLeaveHandler}
                                >
                                </ImageItem>
                            );
                        } else if (item.type == "atlas") {
                            return (
                                <div className='flex items-center ml-4' key={item.name}>
                                    <TriangleDown></TriangleDown>
                                    <SpriteSheet></SpriteSheet>
                                    <span className='ml-2'>asdf</span>
                                </div>
                            );
                        }
                    })
                }

                <div className='flex items-center ml-4'>
                    <span className='w-5 h-5'></span>
                    <Thumbnail></Thumbnail>
                    <span className='ml-2'>aaaaaa</span>
                </div>


            </div>
        </div>
    );
});

export { Library };